<template>
	<view class="content">
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">成品入库</view>
			</view>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="40" align="center">时段</uni-th>
					<uni-th width="35" align="center">数量(件)</uni-th>
					<uni-th width="35" align="center">成品重量(公斤)</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.finished_product_qty }}</view>
					</uni-td>
					<uni-td align="center">{{ item.finished_product_weight }}</uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">销售出库</view>
			</view>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="40" align="center">时段</uni-th>
					<uni-th width="35" align="center">数量(件)</uni-th>
					<uni-th width="35" align="center">重量(公斤)</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.sales_qty }}</view>
					</uni-td>
					<uni-td align="center">{{ item.sales_weight }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">能源消耗</view>
			</view>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="40" align="center">时段</uni-th>
					<uni-th width="35" align="center">电(度)</uni-th>
					<uni-th width="35" align="center">燃气(立方米)</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.electricity_consumption }}</view>
					</uni-td>
					<uni-td align="center">{{ item.gas_consumption }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">材料消耗</view>
			</view>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="30" align="center">时段</uni-th>
					<uni-th width="30" align="center">铝锭(公斤)</uni-th>
					<uni-th width="30" align="center">脱模剂</uni-th>
					<uni-th width="30" align="center">石墨</uni-th>
					<uni-th width="30" align="center">刀具</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">{{ item.aluminum_ingot_consumption }}</uni-td>
					<uni-td align="center">{{ item.mold_release_agent_consumption }}</uni-td>
					<uni-td align="center">{{ item.graphite_consumption }}</uni-td>
					<uni-td align="center">{{ item.tool_consumption }}</uni-td>

				</uni-tr>
			</uni-table>
		</view>

		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">单位成品重量消耗</view>
				<view @click="onMoreClick" class="text">>>查看更多</view>
			</view>

			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="30" align="center">时段</uni-th>
					<uni-th width="40" align="center">铝锭(公斤/公斤)</uni-th>
					<!-- <uni-th width="40" align="center">石墨(公斤/公斤)</uni-th> -->
					<!-- <uni-th width="40" align="center">脱模剂(公斤/公斤)</uni-th> -->
					<!-- 	<uni-th width="40" align="center">刀具</uni-th> -->
					<uni-th width="40" align="center">电(度/公斤)</uni-th>
					<!-- <uni-th width="40" align="center">燃气(立方米/公斤)</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">{{ item.aluminum_ingot_per_kg }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.electricity_per_kg }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">员工及出勤情况</view>
			
			</view>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="30" align="center">时段</uni-th>
					<uni-th width="40" align="center">公司在职员工数</uni-th>
					<uni-th width="40" align="center">出勤总时间(小时)</uni-th>
				<uni-th width="40" align="center">小时产量(公斤/小时)</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.period }}</uni-td>
					<uni-td align="center">{{ item.employees_on_duty }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.total_working_hours }}</view>
					</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.hourly_output }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		
		</view>
		<view class="statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">成品入库数量分析</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="line"
					:opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{}}"
					:chartData="chartData1" />
			</view>
		</view>
		<view class="statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">成品入库重量分析</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="line"
					:opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{line:{}}}"
					:chartData="chartData2" />
			</view>
		</view>

		<view class="date-container" style="margin-top: 20rpx;height: 120rpx;">
			<view class="date-text" style="font-size: 26rpx;">单位成品重量消耗 材料类型：</view>
			<view style="width: 240rpx;">
				<uni-data-select v-model="value" :localdata="consumptionType" @change="consumptionTypeChange"
					:clear="false"></uni-data-select>
			</view>
		</view>


		<view class="charts-box">
			<qiun-data-charts type="line"
				:opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true,},extra:{column:{seriesGap:2,width:10,barBorderCircle:true}}}"
				:chartData="chartData3" />
		</view>
		
	</view>
</template>

<script>
	import {
		GetOperationsOverview,
		UnitWeightLossChart,
		GetDailyProductInStockQuantity,
		GetDailyProductInStockWeight
	} from '../../common/opsoverview_api.js'

	function getDate(showDate, showMonth, showYear) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		if (showDate) {
			return `${year}-${month}-${day}`;
		} else if (showMonth) {
			return `${year}-${month}`;
		} else {
			return `${year - 1}`;
		}
	}
	export default {
		data() {
			return {
				tableData1: [],
				tableData2: [],
				chartData: {},
				opts: {
				},
				value: 0,
				consumptionType: [{
						value: 0,
						text: "铝锭"
					},
					{
						value: 1,
						text: "脱模剂"
					},
					{
						value: 2,
						text: "石墨"
					},
					{
						value: 3,
						text: "刀具"
					},
					{
						value: 4,
						text: "电"
					},
					{
						value: 5,
						text: "燃气"
					}
				],
				dateType: 1, //0:日 1:月 2:年
				chartData1: {},
				chartData2: {},
				chartData3: {}
			}
		},
		onReady() {

			uni.setNavigationBarTitle({
				title: "公司营运总览"
			})
			this.loadData();
		},



		methods: {
			loadData() {
                var data = {
					dimension_type:"公司营运总览"
				};
				GetOperationsOverview(data).then(res => {

					var array = [];
					for (var i = 0; i < res.length; i++) {
						var item = res[i];
						array.push(item);
					}
					this.tableData1 = array;
				});
				var date = getDate(false, true, false);
				this.loadDailyProductInStockQuantity(date);
				this.loadDailyProductInStockWeight(date);
				console.log("loadData");
				this.loadUnitWeightLossChart(date,0);
			},


			onMoreClick() {
				uni.navigateTo({
					url: '/pages/opsoverview/opsoverview-detail?type=' + this.type
				});
			},
			loadDailyProductInStockQuantity(date) {
				var data = {
					date: date,
					dateType: this.dateType
				};
				GetDailyProductInStockQuantity(data).then(res => {
					this.DetailData = res;

					var dateArray = []; //日期数组
					var qtDataArray = []; //上月数据数组
					var ztDataArray = []; //本月数据数组
					for (var i = 0; i < this.DetailData.length; i++) {
						var item = this.DetailData[i];
						dateArray[i] = item.date;
						qtDataArray[i] = item.value_qt;
						ztDataArray[i] = item.value_zt;
					}
					var data1 = {
						categories: dateArray,
						series: [{
								name: "上月",
								data: qtDataArray
							},
							{
								name: "本月",
								data: ztDataArray
							}
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(data1));

				});
			},
			loadDailyProductInStockWeight(date) {
				var data = {
					date: date,
					dateType: this.dateType
				};
				GetDailyProductInStockWeight(data).then(res => {
					this.DetailData = res;
					var dateArray = []; //日期数组
					var qtDataArray = []; //上月数据数组
					var ztDataArray = []; //本月数据数组
					for (var i = 0; i < this.DetailData.length; i++) {
						var item = this.DetailData[i];
						dateArray[i] = item.date;
						qtDataArray[i] = item.value_qt;
						ztDataArray[i] = item.value_zt;
					}
					// console.log("qtDataArray"+qtDataArray);
					//  console.log("ztDataArray"+ztDataArray);
					var data1 = {
						categories: dateArray,
						series: [{
								name: "上月",
								data: qtDataArray
							},
							{
								name: "本月",
								data: ztDataArray
							}
						]
					};
					this.chartData2 = JSON.parse(JSON.stringify(data1));

				});
			},
			loadUnitWeightLossChart(date,consumptionvalue) {
				// console.log(this.value + "------------" + this.consumptionType[this.value].text);
				 
				  
				var data = {
					date: date,
					consumptionType: this.consumptionType[consumptionvalue].text,
					dateType: this.dateType
				};

				UnitWeightLossChart(data).then(res => {
					this.DetailData = res;
					var dateArray = []; //日期数组
					var qtDataArray = []; //上月数据数组
					var ztDataArray = []; //本月数据数组
					for (var i = 0; i < this.DetailData.length; i++) {
						var item = this.DetailData[i];
						dateArray[i] = item.date;
						qtDataArray[i] = item.value_qt;
						ztDataArray[i] = item.value_zt;
					}
					// console.log("qtDataArray"+qtDataArray);
					//  console.log("ztDataArray"+ztDataArray);
					var data1 = {
						categories: dateArray,
						series: [{
								name: "上月",
								data: qtDataArray
							},
							{
								name: "本月",
								data: ztDataArray
							}
						]
					};
					this.chartData3 = JSON.parse(JSON.stringify(data1));

				});
			},
			consumptionTypeChange(e) {
				
				var date = getDate(false, true, false);
				
				this.loadUnitWeightLossChart(date,e);

			},
		},
	}
</script>

<style>
	@import url("opsoverview.css");
</style>